<template>
	<view class="content">
		<swiper :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000;'"
			class="swiper" circular @change="swiperChange" :current="current" :vertical="true" duration="300">
			<swiper-item v-for="(list, index) in displaySwiperList" :key="index">
				<view v-if="Math.abs(displayIndex-index)==0 && list.url">
					<video v-if="Math.abs(displayIndex-index)==0 && list.url" :id="list._id" :controls="controls"
						:loop="!isplay" :enable-progress-gesture="false" @ended="ended" @controlstoggle="controlstoggle"
						@click="tapVides()" :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'"
						:src="list.url | getImg" :poster="list.img">
					</video>
				</view>
				<!-- 最底下的文字部分 -->
				<view class="contentcd">
					<text class="userName" :style="'width: '+ (windowWidth - 90) +'px;'">
						{{list.playlet_title}} {{list.title}}
					</text>
					<text class="wordss" :style="'width: '+ (windowWidth - 90) +'px;'">{{list.playlet_desc}}</text>
					<text class="words" :style="'width: '+ (windowWidth - 90) +'px;'">
						{{list.total}}
					</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		videoGroup
	} from "@/api/api.js"
	let audo = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				sharedata: {
					type: 2,
					strShareUrl: "",
					strShareTitle: "分享标题",
					strShareSummary: "分享总结",
					strShareImageUrl: ""
				},
				fenji: 1,
				controls: true,
				originList: [], // 源数据
				displaySwiperList: [], // swiper需要的数据
				displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
				originIndex: 0, // 记录源数据的下标
				windowWidth: 0,
				windowHeight: 0,
				current: 0,
				oid: 0,
				isplay: true, //是否自动播放下一个视频
				playCount: 2, //剩余多少视频加载视频列表
				nodate: true, //true 有数据 
				duration: 500,
				issp: '',
				isqp: true,
				page: 1,
				urls: 'http://duanju.iseo365.com',

				baymid: 0,
				scrollTop: 0,
				vid: 0,
				mid: 0,
				isbuylx: 0, //大于0单节购买  0全集
				safeArea: 0,
				uid: 0,
				id: '',
				is_init: false
			};
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
			}
			e.fxpid = 1
			if (e.fxpid) {
				if (e.fxpid > 0) {
					uni.setStorage({
						key: 'fxpid',
						data: e.fxpid
					})
				}
			}
			if (uni.getStorageSync("userinfo")) {
				this.uid = uni.getStorageSync("userinfo").id
			}
			uni.getSystemInfo({
				success: res => {
					this.safeArea = res.safeAreaInsets.bottom;
					//console.log(this.safeArea)
				}
			})
			uni.setStorage({
				key: 'isbuy',
				data: 1
			})
			if (e.vid) {
				this.vid = e.vid
			}
			if (e.mid) {
				this.mid = e.mid
			}
			this.vid = 78
			this.mid = 0
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			this.windowHeight = uni.getSystemInfoSync().windowHeight - this.safeArea
			this.videoGroup()
		},
		methods: {
			videoGroup() {
				videoGroup({
					id: this.id
				}).then(res => {
					if (res.status == 1) {
						var msg = res.data;
						this.originList = res.data
						this.initSwiperData(this.originIndex);
					}
				})
			},

			selectThisVideo(index, pays) {
				this.down();
				if (pays == 1) {
					this.baymid = index
					this.fenji = 2
					this.$refs.select.open('bottom');
				} else {
					this.duration = 20;
					this.originIndex = index
					this.initSwiperData(index);
					setTimeout(() => {
						this.duration = 500;
					}, 500)
				}
			},
			down() {
				this.$refs.select.close();
			},
			downbuy() {
				this.$refs.select.close();
			},
			sellxj() {
				this.fenji = 1
				this.$refs.select.open('bottom');
				this.$nextTick(() => {
					let num1 = (this.windowHeight / 1.6) * 0.85;
					let num2 = num1 / 4.78;
					this.scrollTop = num2 * Number(this.k);
				})
			},
			tapVideoHover(index, pays) {
				this.baymid = index
				this.fenji = 2
				this.$refs.select.open('bottom');
			},
			tapVides() {
				this.isqp = !this.isqp
			},
			// Recommend() {
			// 	var uid = 0;
			// 	if (uni.getStorageSync("userinfo")) {
			// 		uid = uni.getStorageSync("userinfo").id
			// 	}
			// 	uni.request({
			// 		//url: this.urls+'/api/video/videoinfo?page='+this.page+'&uid='+uid,
			// 		url: this.urls + '/api/video/videoinfo?page=' + this.page + '&uid=' + uid + '&vid=' + this
			// 			.vid + '&mid=' + this.mid + '&token=' + uni.getStorageSync("userinfo").token,
			// 		success: (res) => {
			// 			if (res.data.isempty == 1) {
			// 				// #ifdef MP-WEIXIN
			// 				if (res.data.videodata) {
			// 					uni.setNavigationBarTitle({
			// 						title: res.data.videodata.name
			// 					});
			// 				}
			// 				// #endif
			// 				var msg = res.data.data
			// 				var midlog = res.data.midlog
			// 				//2.这里把视频添加到视频列表
			// 				if (this.page == 1) {
			// 					this.originList = res.data.data
			// 					this.originIndex = 0
			// 					// for (let i = 0; i < msg.length; i++) {
			// 					// 	if (this.mid > 0) { //等于0 上一个页面视频id未0 相当于没有上传
			// 					// 		if (msg[i].mid == this.mid) { //判断判断上一个页面视频id
			// 					// 			this.originIndex = i
			// 					// 		}
			// 					// 	} else {
			// 					// 		if (msg[i].mid == midlog) { //判断当前历史记录最新视频id
			// 					// 			this.originIndex = i
			// 					// 		}
			// 					// 	}
			// 					// }
			// 					this.initSwiperData(this.originIndex);
			// 				} else {
			// 					for (let i = 0; i < msg.length; i++) {
			// 						this.originList.push(msg[i])
			// 					}
			// 				}
			// 				this.page = this.page + 1
			// 			} else {
			// 				this.nodate = false
			// 			}
			// 		}
			// 	})
			// },
			ended() {
				//console.log('isplay----',this.isplay)
				// 1.播放当前视频结束时触发，自动切换下一个视频
				if (this.isplay) {
					if (this.displayIndex < 2) {
						this.current = this.displayIndex + 1
					} else {
						this.current = 0
					}
					this.isqp = true
				}
			},
			/**
			 * 初始一个显示的swiper数据
			 * @originIndex  从源数据的哪个开始显示默认0，如从其他页面跳转进来，要显示第n个，这个参数就是他的下标
			 */
			initSwiperData(originIndex = this.originIndex) {
				this.isqp = false
				//console.log('--------当前数据 Index:',originIndex)
				const originListLength = this.originList.length; // 源数据长度
				const displayList = [];
				displayList[this.displayIndex] = this.originList[originIndex];
				displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] =
					this.originList[
						originIndex - 1 == -1 ? originListLength - 1 : originIndex - 1
					];
				displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] =
					this.originList[
						originIndex + 1 == originListLength ? 0 : originIndex + 1
					];
				this.displaySwiperList = displayList;


				try {
					audo.pause()
				} catch (e) {
					//TODO handle the exception
				}

				if (this.oid >= this.originList.length) {
					this.oid = 0
				}
				if (this.oid < 0) {
					this.oid = this.originList.length - 1
				}
				console.log(this);
				uni.createVideoContext(this.originList[this.oid]._id, this).stop();
				if (this.originList[originIndex].pays == 1) {
					this.isqp = true
					this.baymid = this.originIndex
					this.fenji = 2
					this.$refs.select.open('bottom');
				} else {
					if (this.is_init) {
						setTimeout(() => {
							this.isqp = true
							//audo.play()
							uni.createVideoContext(this.originList[originIndex]._id, this).play();
							this.bfjl(this.originList[originIndex].mid)
						}, 500)
					} else {
						this.is_init = true
					}

				}
				var pCount = this.originList.length - this.playCount
				if (originIndex == pCount && this.nodate) {
					// this.Recommend()
				}
			},
			/**
			 * swiper滑动时候
			 */
			swiperChange(event) {
				const {
					current
				} = event.detail;
				const originListLength = this.originList.length; // 源数据长度
				// =============向后==========
				if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {
					this.originIndex =
						this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;
					this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;
					//console.log('+++',this.originIndex)
					this.oid = this.originIndex - 1
					this.initSwiperData(this.originIndex);
				}
				// ======如果两者的差为-2或者1则是向前滑动============
				else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {
					this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1;
					this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;
					//console.log('---',this.originIndex)
					this.oid = this.originIndex + 1
					this.initSwiperData(this.originIndex);
				}
				console.log('old', this.oid);
			},
			detail(vid, mid) {
				var fxpid = 1
				if (uni.getStorageSync("userinfo")) {
					fxpid = uni.getStorageSync("userinfo").id
				}
				uni.navigateTo({
					url: '/pages/client/tuan/detail?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
				})
			},
			toComment(sss, vid, mid) {
				if (uni.getStorageSync("userinfo")) {

				} else {
					this.denglu()
					return false
				}
				const video = this.displaySwiperList[this.displayIndex];
				//console.log(sss)
				if (sss == 1) {
					this.displaySwiperList[this.displayIndex].iszj = 2
				} else {
					this.displaySwiperList[this.displayIndex].iszj = 1
				}

				let this_ = this
				let data = {
					'vid': vid,
					'mid': mid
				};
				data.token = uni.getStorageSync("userinfo").token
				data.uid = uni.getStorageSync("userinfo").id
				uni.request({
					url: this_.urls + '/api/user/videorecord',
					data: data,
					success: data => {
						// uni.showToast({
						// 	icon:'none',
						// 	title:data.data.msg
						// })
					},
					fail: (data, code) => {}
				});
			},
			bfjl(mid) { //更新播放记录
				let this_ = this
				if (uni.getStorageSync("userinfo")) {
					let data = {
						'vid': this_.vid,
						'mid': mid
					};
					data.uid = uni.getStorageSync("userinfo").id
					uni.request({
						url: this_.urls + '/api/video/bfjl',
						data: data,
						success: data => {

						},
						fail: (data, code) => {}
					});
				}
			},
			controlstoggle(e) {
				console.log(e.detail.show);
				this.issp = e.detail.show
			},
			cLike(sss, vid, mid) {
				if (uni.getStorageSync("userinfo")) {

				} else {
					this.denglu()
					return false
				}
				const video = this.displaySwiperList[this.displayIndex];
				if (sss == 1) {
					this.displaySwiperList[this.displayIndex].like = 2
					video.like_n += 1;
				} else {
					this.displaySwiperList[this.displayIndex].like = 1
					video.like_n -= 1
				}

				console.log(vid)

				let this_ = this
				let data = {
					'vid': vid,
					'mid': mid
				};
				data.token = uni.getStorageSync("userinfo").token
				data.uid = uni.getStorageSync("userinfo").id
				uni.request({
					url: this_.urls + '/api/user/tapLove',
					data: data,
					success: data => {
						// uni.showToast({
						// 	icon:'none',
						// 	title:data.data.msg
						// })
						// if(data.data.msg=='取消成功'){
						// 	video.like_n -= 1
						// }else{
						// 	video.like_n += 1;
						// }
					},
					fail: (data, code) => {}
				});
			},
			denglu() {
				uni.showModal({
					title: '温馨提示',
					content: '请先登录',
					showCancel: true,
					confirmText: "登录",
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						} else if (res.cancel) {
							//uni.navigateBack();
						}
					}
				});

			}
		},
		created() {

		},
	};
</script>

<style lang="scss">
	page {
		background: #000000;
	}

	button {
		&::after {
			border: 0;
		}
	}

	.title {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60rpx;
	}

	.swiper {}

	.wrap_content {
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: gray;
		color: aqua;
		height: 100%;
		font-size: 80px;
		margin: 0rpx 40rpx;
	}

	.container {
		background-color: #000000;
	}

	.item {
		/* width : 750rpx; */
		background-color: #000000;
		position: relative;
	}

	.videoHover {
		position: absolute;
		top: 0px;
		left: 0;
		flex: 1;
		background-color: rgba(0, 0, 0, 0.1);
		justify-content: center;
		align-items: center;
		display: flex;
		/* border-style: dashed;
		border-color: #DD524D;
		border-width: 1px; */
	}

	.playState {
		width: 160rpx;
		height: 160rpx;
		opacity: 0.2;
	}

	.userInfo {
		position: absolute;
		z-index: 99;
		bottom: 30%;
		right: 10px;
		width: 100rpx;
		text-align: center;
		flex-direction: column;

		view {
			display: flex;
			align-items: stretch;
			align-content: flex-start;
			justify-content: center;
		}
	}

	.userAvatar {
		border-radius: 500%;
		margin-bottom: 15px;
		border-style: solid;
		border-width: 2px;
		border-color: #ffffff;
	}

	.userAvatar {
		width: 100rpx;
		height: 100rpx;
	}

	.likeIco,
	.shareIco,
	.commentIco {
		width: 60rpx;
		height: 60rpx;
		margin-top: 15px;
	}

	.likeNum,
	.commentNum,
	.shareTex {
		color: #ffffff;
		font-size: 30rpx;
		text-align: center;
		margin: 5px;
	}

	.likeNumActive {
		color: red;
	}

	.contentcd {
		width: 720rpx;
		z-index: 99;
		position: absolute;
		bottom: 70rpx;
		/* justify-content: center; */
		padding: 15rpx;
		flex-direction: column;
		justify-content: flex-start;
		color: #ffffff;
		display: flex;

		view {
			display: flex;
		}
	}

	.userName {
		font-size: 30rpx;
		color: #ffffff;
		margin-top: 80upx;
	}

	.words {
		margin-top: 16rpx;
		font-size: 30rpx;
		color: #ffffff;
		margin-bottom: 20rpx;
	}

	.wordss {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #ffffff;
	}

	.root {
		background-color: #000000;
	}

	.gdfgjh {
		font-size: 30rpx;
		font-weight: 600;
		line-height: 90rpx;
		background: #fff;
		border-radius: 18rpx;
		padding: 0 20rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}
</style>